<!DOCTYPE html>
<html>
<head>
    <title>Security warning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            color:#343a3c;
            background-color:#ffffff;
        }

        .interstitial-wrapper {
            box-sizing: border-box;
            margin: 7vh auto 12px;
            padding: 0 24px;
            position: relative;
            max-width: 736px;
            font-size: 1em;
            line-height: 1.6em;
            width: 100%;
            font-weight: normal;
            line-height: 1.25em;
        }

        #certErrorAndCaptivePortalButtonContainer {
            margin-top: 2em;
        }

        button {
            font-family: 'Segoe UI', Tahoma, sans-serif;
            font-size: .933em;
            margin: 6px 0;
            transform: translatez(0);
            border: 0;
            border-radius: 4px;
            box-sizing: border-box;
            color: var(--primary-button-text-color);
            cursor: pointer;
            float: right;
            font-size: .875em;
            margin: 0;
            padding: 8px 16px;
            transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            border-radius: 16px;
        }

        #returnButton {
            background-color: #a4a4ff;
            color: white;
            float: left;
        }

        #goForwardButton {
            background-color: #ffa4a4;
            color: white;
            float: right;
        }
    </style>
</head>
<body onload="onLoad();">
<div class="interstitial-wrapper">
    <div>
        <img src="file:///android_asset/pages/ic_warning.svg">
        <!--<img src="ic_warning.svg">-->
        <h1 id="caption" style="margin-bottom: 28px;"></h1>
        <p><b id="hostnameLabel"></b> <span id="hostname"></span></p>
        <p><b id="errorDeskr"></b> <span id="error"></span></p>
        <p><b id="details"></b><br> <span id="error-details"></span></p>

        <div id="certErrorAndCaptivePortalButtonContainer">
            <button id="returnButton" onclick="TVBro.navigateBack();"></button>
            <button id="goForwardButton" onclick="TVBro.reloadWithSslTrust();"></button>
        </div>
    </div>
</div>
<script>
function onSuggestionClicked(index) {
    TVBro.navigate(suggs[index].url);
}
function onLoad() {
    //translate captions first
    document.getElementById("caption").innerHTML = TVBro.getStringByName('connection_isnt_secure');
    document.getElementById("hostnameLabel").innerHTML = TVBro.getStringByName('hostname');
    document.getElementById("errorDeskr").innerHTML = TVBro.getStringByName('err_desk');
    document.getElementById("details").innerHTML = TVBro.getStringByName('details');
    document.getElementById("returnButton").innerHTML = TVBro.getStringByName('back_to_safety');
    document.getElementById("goForwardButton").innerHTML = TVBro.getStringByName('go_im_aware');

    //show error info
    let url = new URL(TVBro.currentUrl());
    document.getElementById("hostname").innerHTML = url.hostname;
    let error = TVBro.lastSSLError(false);
    document.getElementById("error").innerHTML = error;
    error = TVBro.lastSSLError(true);
    document.getElementById("error-details").innerHTML = error;
}
</script>
</body>
</html>